<template>
  <el-card>
    <div class="box">
      <el-form :model="uParams" ref="UPass" :rules="rules" id="Pasw">
        <el-form-item label="当前密码：" prop="nowPassword">
          <el-input type="password" v-model="uParams.nowPassword" />
        </el-form-item>
        <el-form-item label="　新密码：" prop="newPassword">
          <el-input type="password" v-model="uParams.newPassword" />
        </el-form-item>
        <el-form-item label="确认密码：" prop="newPassword1">
          <el-input type="password" v-model="uParams.newPassword1" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="BackToIndex()">取消</el-button>
        <el-button type="primary" @click="UpdatePassword()">
          确认修改
        </el-button>
      </div>
    </div>
  </el-card>
</template>
<script>
import { updatePW, FindInfo } from "@/api/login";
export default {
  data() {
    return {
      uParams: {
        nowPassword: "",
        newPassword: "",
        newPassword1: "",
      },
      submitParams: {},
      rules: {
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
        ],
        newPassword1: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: "blur",
          },
        ],
        nowPassword: [
          {
            required: true,
            message: "请输入当前密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.username = localStorage.getItem("username");
  },
  methods: {
    BackToIndex() {
      this.$router.push(`/home`);
    },
    UpdatePassword() {
      this.$refs.UPass.validate((valid) => {
        if (valid) {
          FindInfo(this.username).then((res) => {
            if (this.uParams.nowPassword === res.data.data.password) {
              if (this.uParams.newPassword === this.uParams.newPassword1) {
                this.submitParams.username = this.username;
                this.submitParams.password = this.uParams.newPassword;
                updatePW(this.submitParams).then((res) => {
                  if (res.data.code == 200) {
                    this.$notify({
                      title: "成功",
                      message: "密码修改成功,请重新登录。",
                      type: "success",
                      duration: 1500,
                    });
                    this.$router.push(`/login`);
                  }
                });
              } else {
                this.$notify({
                  title: "失败",
                  message: "两次密码输入不一致,请检查无误后重新输入。",
                  type: "error",
                  duration: 1500,
                });
                this.uParams.newPassword = "";
                this.uParams.newPassword1 = "";
              }
            } else {
              this.$notify({
                title: "失败",
                message: "当前密码输入错误,请检查无误后重新输入。",
                type: "error",
                duration: 1500,
              });
              this.uParams.nowPassword = "";
              this.uParams.newPassword = "";
              this.uParams.newPassword1 = "";
            }
          });
        }
      });
    },
  },
};
</script>

<style>
#Pasw .el-form-item__label {
  width: 105px !important;
  /* border: 1px solid red !important; */
}
</style>
<style scoped>
.box {
  width: 600px;
  margin: 0 auto;
  height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

::-webkit-scrollbar {
  width: 0;
}
</style>
